<template>
  <n-data-table :columns="columns" :data="list" :pagination="pagination" />
</template>

<script lang="tsx" setup>
import { h, ref, onMounted } from 'vue'
import { NTag, NButton, useMessage, NSpace } from 'naive-ui'
import { getArticles } from '../../api/article'
// 注意：在 script setup 中加载类型必须使用 import type xxx 的方式
import type { IArticle } from '../../api/types/article'

const message = useMessage()

const createColumns = (options: {
  handleDelete: (row: IArticle) => void
}) => {
  return [
    {
      title: '编号',
      key: 'id'
    },
    {
      title: '标题',
      key: 'title'
    },
    {
      title: '内容',
      key: 'content'
    },
    // {
    //   title: 'Tags',
    //   key: 'tags',
    //   render (row) {
    //     const tags = row.tags.map((tagKey) => {
    //       return h(
    //         NTag,
    //         {
    //           style: {
    //             marginRight: '6px'
    //           },
    //           type: 'info'
    //         },
    //         {
    //           default: () => tagKey
    //         }
    //       )
    //     })
    //     return tags
    //   }
    // },
    {
      title: '操作',
      key: 'actions',
      // 渲染函数：https://v3.cn.vuejs.org/guide/render-function.html
      render (row: IArticle) {
        return (
          <NSpace>
            <NButton size="small" onClick={() => options.handleDelete(row)}>编辑</NButton>
            <NButton size="small" onClick={() => options.handleDelete(row)}>删除</NButton>
          </NSpace>
        )
        // return h(
        //   NButton,
        //   {
        //     size: 'small',
        //     onClick: () => options.handleDelete(row)
        //   },
        //   { default: () => '删除' }
        // )
      }
    }
  ]
}

const list = ref<IArticle[]>([])

onMounted(() => {
  loadList()
})

const loadList = async () => {
  const { data } = await getArticles()
  list.value = data
}

const columns = createColumns({
  handleDelete (rowData) {
    message.info('send mail to ' + rowData.content)
  }
})

const pagination = {
  pageSize: 10
}

</script>

<style lang="scss" scoped></style>
